<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Area</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>


<div class="layui-container">
    <div class="layui-row" style="border: cadetblue 1px solid;padding: 20px;margin-top: 30px">
        <h1>林地区域一览</h1>
        <table id="demo" lay-filter="areaTable"></table>

        <div class="layui-col-md4" style="border: cadetblue 1px solid;padding: 20px">
            <input type="text" name="title" required lay-verify="required" id="areaName" placeholder="请输入要查询的区域名称"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="text" name="title" required lay-verify="required" id="treeType" placeholder="请输入要查询的树木种类"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="text" name="title" required lay-verify="required" id="className" placeholder="请输入要查询的小班名称"
                   autocomplete="off" class="layui-input">
            <br>
            <button class="layui-btn" type="button" id="Find">查询</button>
            <button class="layui-btn" type="button" id="back">所有</button>
            <button class="layui-btn layui-bg-orange" type="button" id="buttonAdd" >添加新的区域信息</button>
        </div>


    </div>

</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>

<script>
    layui.use('table', function () {
        let $ = layui.$;
        let layer = layui.layer;
        let table = layui.table;
        //第一个实例
        let show = table.render({
            elem: '#demo'
            , url: '/Trees/area' //数据接口
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.list
                };
            }
            , cols: [[ //表头
                {field: 'pkId', title: 'ID', fixed: 'left'}
                , {field: 'name', title: '区域名称'}
                , {field: 'tree', title: '林种'}
                , {field: 'land', title: '地类'}
                , {field: 'treetype', title: '优势树种'}
                , {
                    field: 'className', title: '负责小班', templet: function (d) {
                        return d.tClass.className;
                    }
                }
            ]]
        });

        $('#Find').on('click', function () {
            show.reload({
                where: {
                    areaName: $('#areaName').val()
                    , treeType: $('#treeType').val()
                    , className: $('#className').val()
                }
                , page: {
                    curr: 1
                }
            })
        })

        $('#back').on('click', function () {
            show.reload({
                where: {
                    areaName: ""
                    , treeType: ""
                    , className: ""
                }
                , page: {
                    curr: 1
                }
            })
        })

        $('#buttonAdd').on('click', function () {
            layer.open({
                type: 2
                , content: "/Trees/LayUiBac/home/disaster/Jump/showTree.html"
                , area: ['600px', '600px']
                , shade: ['0.9', '#393D49']
                , anmi: 0
                , maxmin: true
                , btn: ['确认添加']
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    let  areaName= body.find("input[name=areaName]").val()
                    let tree= body.find("input[name=tree]").val()
                    let land= body.find("select[name=land]").val()
                    let treeType= body.find("input[name=treeType]").val()
                    let strs = "/Trees/area?method=add"+"&areaName="+areaName+"&tree="+tree+"&land="+land+"&treeType="+treeType;
                    $.ajax({
                        type: "get"
                       , url: strs
                    })
                    console.log(strs)
                    layer.close(index);
                    show.reload();
                }
                , success: function () {

                }
            })
        })
    });
</script>

</body>
</html>